<template>
      <div class="shopCar">
           <div class="shopCar_background">
                  <div class="user_shopCar">
                              <div class="userInfo">
                                    <div class="user_img"></div>
                                    <h2 class="user_name">{{username1}}</h2>
                              </div>
                              <div class="shopCar">
                                     <a href="javascript:;">个人中心</a>
                                     <div class="shop_icon">
                                           <a class="iconfont icon-dingdan" href="javascript:;"></a>
                                           <a class="iconfont  icon-daifukuan" href="javascript:;"></a>
                                           <a class="iconfont icon-pingjia" href="javascript:;"></a>
                                           <a class="iconfont icon-kuaidi" href="javascript:;"></a>
                                     </div>
                              </div>
                  </div>
           
          
           </div>

      </div>
</template>

<script>
export default {
      data(){
            return{

            }
      },
      computed:{
             username1() {
				  return this.$store.state.username1
			 }
      }
}
</script>


<style>
.shopCar{
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
}
       .shopCar_background{
            width: 100%;
            height: 250px;
            background-image: url(../../../../static/shopCar/1019120242.jpg);
            background-position: center;
            background-size: cover;
            padding-top: 100px;
           
       }
.user_shopCar{
       width: 700px;
       height: 180px;
       background: rgba(51, 51, 51, 0.3);
       margin: 0 auto;
       border-radius: 10px;
       box-sizing: border-box;
       overflow: hidden;
       display:flex;
       justify-content: space-around;
       align-items: center;
}
.userInfo{
       display: inline-block;
        float: left;
       position: relative;
       bottom: 0px;
       width: 200px;
       height: 180px;
       background: rgba(255, 255, 255, 0.8412);
       border-radius: 10px;
       box-sizing: border-box
}
.user_img{
       width: 100px;
       height: 100px;
       border: 1px solid #333;
       border-radius: 50%;
       display: inline-block;
       margin-left: 50px;
       margin-top: 10px;
       background-image: url(../../../../static/img/icon/user.png);
       background-position: center;
       background-size: cover;
      
}
.user_name{
       width: 100%;
       height: 100%;
       display: inline-block;
       text-align: center;
       line-height: 50px;
       font-size: 20px;
       font-weight: bold;
       font-style: italic;
       font-family: 'Arial','SimHei'
}
.shopCar{
       float: left;
       display: inline-block;
       width: 480px;
       height: 180px;
       border-radius: 10px;
       background: rgba(255, 255, 255, 0.8412);
       
}
.shopCar a{
      color: #333;
      text-decoration: none;
      margin-top: 30px;
      display: block;
      width: 100%;
      height: 30px;
      text-align: center;
      font-size: 20px;
      font-family: 'SimHei';
}
.shop_icon{
       margin: 20px auto;
       width: 300px;
       height: 60px;
       display: block;
       display: flex;
       justify-content: space-around;
       align-items: center;
       flex-direction: row;
       color: #333;
   
       font-family: 'SimHei';
       /* background: rebeccapurple; */

}
.shop_icon a{
      width: 50px;
      height: 50px;
      /* background: red; */
       color: #333;
       font-size: 30px;
       font-family: 'SimHei';
      
      
}
</style>
